<template>
  <div class="app-container">
    <div id="chart-3" style="width:100%;height:300px;" />
  </div>
</template>

<script>

const labelOption = {
  show: true,
  position: 'top',
  distance: 10,
  align: 'center',
  verticalAlign: 'middle',
  rotate: 0,
  formatter: '{c} ',
  fontSize: 16,
  fontWeight: 'bold',
  color: '#000',
  rich: {
    name: {}
  }
}

export default {
  data() {
    return {
      tableData: [],
      type: 2,
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#000',
            fontWeight: 'bold'
          }
        },
        legend: {
          data: ['热洗', '化防', '热洗+化防']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: [],
            axisLabel: {
              fontWeight: 'bold',
              fontSize: 16,
              color: '#000',
              show: true,
              interval: 0
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              fontWeight: 'bold',
              fontSize: 16,
              color: '#000'
            }
          }
        ],
        series: [
          {
            name: '热洗',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '化防',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [],
            itemStyle: {
              color: '#fac858'
            }
          },
          {
            name: '热洗+化防',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [],
            itemStyle: {
              color: '#ee6666'
            }
          }
        ]
      }
    }
  },
  async mounted() {
    const myChart = this.echarts.init(document.getElementById('chart-3'))
    const x_data = [];
    const hua_data = [];
    const hot_data = [];
    const dou_data = [];
    await this.$http.post('/summaryStatistics/blockCraft',{type:this.type}).then(response => {
      this.tableData = response.data.data
      console.log('123')
      for (var responseKey in this.tableData) {
        var map = {}
        map = this.tableData[responseKey]
        console.log(map)
        for (var key in map) {
          if (key === 'block_name') {
            x_data.push(map[key])
            console.log(x_data, 'x_data')
          } else if (key === 'craft01') {
            hot_data.push(map[key])
            console.log(hot_data, 'h_data')
          } else if (key === 'craft02') {
            hua_data.push(map[key])
            console.log(hua_data, 'hua_data')
          } else if (key === 'craft03') {
            dou_data.push(map[key])
            console.log(dou_data, 'dou_data')
          }
        }
      }
    }).catch(err => {
      this.$message.error(err)
    })
    this.option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        textStyle: {
          color: '#000',
          fontWeight: 'bold'
        }
      },
      legend: {
        data: ['热洗', '化防', '热洗+化防']
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: x_data,
          axisLabel: {
            fontWeight: 'bold',
            fontSize: 16,
            color: '#000',
            show: true,
            interval: 0
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            fontWeight: 'bold',
            fontSize: 16,
            color: '#000'
          }
        }
      ],
      series: [
        {
          name: '热洗',
          type: 'bar',
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: hot_data
        },
        {
          name: '化防',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: hua_data,
          itemStyle: {
            color: '#fac858'
          }
        },
        {
          name: '热洗+化防',
          type: 'bar',
          label: labelOption,
          emphasis: {
            focus: 'series'
          },
          data: dou_data,
          itemStyle: {
            color: '#ee6666'
          }
        }
      ]
    }
    myChart.setOption(this.option)
    window.onresize = function() {
      myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  margin: 20px;
}
</style>
